<template>
  <div class="mydate">
    <!-- 标题 -->
    <h3 class="iconfont">&#xe996; 人生倒计时</h3>
    <ul class="dateBox">
      <li>
        <span style="font-s"
          >今日已过去 <i>{{ myDate.D }}</i></span
        >
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="90"
        ></el-progress>
      </li>
      <li>
        <span>xxx已过去</span>
        <el-progress
          color="pink"
          :text-inside="true"
          :stroke-width="20"
          :percentage="66"
        ></el-progress>
      </li>
      <li>
        <span>xxx已过去</span>
        <el-progress
          color="skyblue"
          :text-inside="true"
          :stroke-width="20"
          :percentage="65"
        ></el-progress>
      </li>
      <li>
        <span>xxx已过去</span>
        <el-progress
          color="salmon"
          :text-inside="true"
          :stroke-width="20"
          :percentage="78"
        ></el-progress>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Mydate',
    data() {
      return {
        myDate: {
          h: 0, //小时
          week: 0, // 星期
          D: 0, // 本月已过多少天
          Y: 0, // 本年已过多少月
        },
      };
    },
    methods: {
      getDate() {
        const date = new Date();
        this.myDate.h = date.getHours();
        this.myDate.week = date.getDay();
        this.myDate.getDate();
        this.myDate.Y = date.getMonth() + 1;
      },
    },
    created() {
      this.getDate();
    },
  };
</script>

<style lang="less" scoped>
  ::v-deep span {
    font-size: 12px !important;
  }
  ::v-deep i {
    font-size: 14px;
    color: salmon !important;
  }
  @import url('../../state/css/register/mydate.less');
</style>
